<template>
    <jb-page
        title-icon="ooui:search-case-sensitive"
        title-text="敏感词词库管理"
        conditions-align="start"
    >
        <template #conditions>
            <span class="ml-10" style="font-size: 12px; color: #f12525">
                注意:词库维护变更后，系统敏感词词库将自动执行重新加载！
            </span>
        </template>
        <splitpanes class="default-theme">
            <pane size="30">
                <splitpanes horizontal>
                    <pane>
                        <jb-page
                            title-icon="ooui:search-case-sensitive"
                            title-text="词库统计"
                            :bordered="true"
                        >
                            <template #opt>
                                <jb-btn
                                    :icon="Icons.REFRESH"
                                    ghost
                                    type="primary"
                                    url="/api/admin/sensitiveWord/reload"
                                    @success="loadStatisticsData"
                                    >重新加载</jb-btn
                                >
                            </template>
                            <template #default>
                                <vxe-table align="center" :data="statisticsData">
                                    <jb-column
                                        field="totalCount"
                                        title="总量"
                                    ></jb-column>
                                    <jb-column field="useNumber" title="启用/禁用">
                                        <template #default="{ row }">
                                            <span class="text-success">{{
                                                row?.enableCount
                                            }}</span
                                            >/<span class="text-error">{{
                                                row?.disabledCount
                                            }}</span>
                                        </template>
                                    </jb-column>
                                    <jb-column
                                        field="loadedCount"
                                        title="已加载"
                                    ></jb-column>
                                </vxe-table>
                            </template>
                        </jb-page>
                    </pane>
                    <pane>
                        <jb-page
                            title-icon="ooui:search-case-sensitive"
                            title-text="词库测试"
                            :bordered="true"
                        >
                            <template #default>
                                <n-input
                                    v-model:value="testValue"
                                    type="textarea"
                                    rows="10"
                                    placeholder="输入需要检测的文本"
                                />
                            </template>
                            <template #footer>
                                <div class="flex justify-end">
                                    <jb-btn
                                        :icon="Icons.REFRESH"
                                        color="#007bff"
                                        @click="sensitiveTest"
                                        >执行检测</jb-btn
                                    >
                                </div>
                                <div
                                    v-if="showSensitiveResult"
                                    class="w-full flex justify-between mt-20px"
                                    style="background-color: #fff3cd; padding: 10px 20px"
                                >
                                    <span class="flex-shrink-0 w-80px">检测结果：</span>
                                    <div v-if="testResult.length > 0" class="flex-1">
                                        <span
                                            v-for="item in testResult"
                                            class="bold flex-wrap mr-10px"
                                            style="
                                                color: #fff;
                                                background-color: red;
                                                padding: 2px 6px;
                                                font-size: 12px;
                                                border-radius: 10px;
                                            "
                                            >{{ item }}</span
                                        >
                                    </div>
                                    <span v-else class="flex justify-center"
                                        >无匹配敏感词</span
                                    >
                                </div>
                            </template>
                        </jb-page>
                    </pane>
                </splitpanes>
            </pane>
            <pane>
                <jb-crud-page
                    ref="sensitivePage"
                    :edit-component="SensitiveEdit"
                    title-icon="ooui:search-case-sensitive"
                    title-text="词库统计"
                    search-url="/api/admin/sensitiveWord/datas"
                    :search-conditions="pageConditions"
                    :bordered="true"
                    @after-search="loadStatisticsData"
                >
                    <template #conditions-form>
                        <n-input
                            v-model:value="pageConditions.keywords"
                            type="text"
                            placeholder="输入关键字搜索"
                        />
                        <jb-select
                            v-model:value="pageConditions.enable"
                            url="/api/admin/dictionary/options?typeKey=options_enable"
                            placeholder="=是否启用="
                            :clearable="false"
                            filterable
                            class="w-130px"
                        ></jb-select>
                    </template>
                    <template #opt>
                        <n-button-group>
                            <jb-btn
                                :icon="Icons.DELETE"
                                type="error"
                                confirm-text="确定删除选中数据？"
                                ghost
                                @confirm="doBatchDel"
                                >删除
                            </jb-btn>
                            <jb-btn
                                :icon="Icons.ADD"
                                ghost
                                type="primary"
                                @click="sensitivePage?.showEditModal('新增敏感词')"
                            >
                                新增
                            </jb-btn>
                            <jb-btn
                                :icon="Icons.REFRESH"
                                ghost
                                type="warning"
                                @click="sensitivePage?.loadData()"
                            >
                                刷新
                            </jb-btn>
                        </n-button-group>
                    </template>
                    <template #default="{ state }">
                        <vxe-table
                            ref="tableRef"
                            height="auto"
                            border
                            show-header-overflow
                            show-overflow
                            :checkbox-config="{ trigger: 'row' }"
                            :column-config="{ resizable: true }"
                            :seq-config="{ startIndex: state.tableStartIndex }"
                            :row-config="{ isHover: true }"
                            align="center"
                            :data="state.list"
                        >
                            <jb-column type="checkbox" width="60"></jb-column>
                            <jb-column type="seq" title="序号" width="60"></jb-column>
                            <jb-column
                                field="content"
                                title="敏感词"
                                min-width="160"
                            ></jb-column>
                            <jb-column field="enable" title="启用/禁用" width="90">
                                <template #default="{ row }">
                                    <jb-switch
                                        v-model:value="row.enable"
                                        :url="`/api/admin/sensitiveWord/toggleEnable/${row.id}`"
                                        @change="sensitivePage?.loadData()"
                                    ></jb-switch>
                                </template>
                            </jb-column>
                            <jb-column width="110" title="操作" fixed="right">
                                <template #default="{ row }">
                                    <jb-btn
                                        tip-text="编辑"
                                        :icon="Icons.EDIT"
                                        type="warning"
                                        secondary
                                        circle
                                        @click="
                                            sensitivePage?.showEditModal('编辑资源', {
                                                content: row.content,
                                                id: row.id
                                            })
                                        "
                                    ></jb-btn>
                                    <jb-btn
                                        tip-text="删除"
                                        :icon="Icons.DELETE"
                                        type="error"
                                        secondary
                                        circle
                                        class="mx-8px"
                                        confirm-text="确定删除这条数据？"
                                        :url="`/api/admin/sensitiveWord/delete/${row.id}`"
                                        @success="sensitivePage?.loadData()"
                                    ></jb-btn>
                                </template>
                            </jb-column>
                        </vxe-table>
                    </template>
                </jb-crud-page>
            </pane>
        </splitpanes>
    </jb-page>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { VxeTableInstance } from 'vxe-table'
import { Icons } from '@/constants'
import { JBoltApi } from '@/utils/request'
import JbCrudPage from '@/components/_builtin/jb-crud-page/index.vue'
import { useResetableData } from '@/hooks/common/use-resetable-data'
import SensitiveEdit from './components/edit/index.vue'
/* 词库统计 */

const statisticsData = ref()

async function loadStatisticsData() {
    const { error, result } = await JBoltApi.get('/api/admin/sensitiveWord/counts')
    if (error) return
    statisticsData.value = [result.data]
}
/* 词库测试 */
const testValue = ref('')
const testResult = ref<string[]>([])
const showSensitiveResult = ref(false)
async function sensitiveTest() {
    testResult.value = []
    const { error, result } = await JBoltApi.post('/api/admin/sensitiveWord/test', {
        content: testValue.value
    })
    if (error) return
    if (result.data) {
        testResult.value = result.data
    }
    showSensitiveResult.value = true
}

/* 词库维护*/

const sensitivePage = ref<InstanceType<typeof JbCrudPage> | null>(null)
const pageConditions = useResetableData({
    keywords: '',
    enable: 'true'
})

/* 批量删除*/
const tableRef = ref<VxeTableInstance<any>>()
function doBatchDel() {
    const $table = tableRef.value
    if ($table) {
        const selectRecords = $table.getCheckboxRecords()
        let ids = selectRecords.map((obj) => obj.id).join(',')

        JBoltApi.get(`/api/admin/sensitiveWord/deleteByIds?ids=${ids}`).then((res) => {
            sensitivePage.value?.loadData()
        })
    }
}

onMounted(async () => {
    await loadStatisticsData()
})
</script>

<style scoped></style>
